Master-Detail View এবং User Control হল দুটি গুরুত্বপূর্ণ ধারণা যা MVVM প্যাটার্নে View এর কাঠামো এবং পুনঃব্যবহারযোগ্যতার উন্নতি ঘটাতে ব্যবহৃত হয়। Master-Detail View অ্যাপ্লিকেশনগুলিতে ডেটা প্রদর্শন এবং User Control ইউজার ইন্টারফেস (UI) উপাদানগুলির পুনঃব্যবহারযোগ্য কম্পোনেন্ট তৈরির জন্য ব্যবহৃত হয়।

এখানে Master-Detail View এবং User Control ব্যবহারের বিস্তারিত আলোচনা করা হয়েছে।

Master-Detail View

Master-Detail View একটি সাধারণ UI প্যাটার্ন যা বড় ডেটা সেট বা তালিকা প্রদর্শনের জন্য ব্যবহৃত হয়। এটি একটি Master প্যানেল এবং একটি Detail প্যানেল নিয়ে গঠিত থাকে। Master প্যানেল একটি তালিকা বা ডেটার সারাংশ দেখায়, এবং Detail প্যানেল সেই তালিকা থেকে নির্বাচিত আইটেমের বিস্তারিত তথ্য প্রদর্শন করে।

Master-Detail View এর সুবিধা:

• সুযোগসুবিধা: ব্যবহারকারী সহজেই তালিকা থেকে একটি আইটেম নির্বাচন করতে পারে এবং তার বিস্তারিত তথ্য দেখতে পারে।
• ক্লিন এবং পরিষ্কার UI: এই প্যাটার্নের মাধ্যমে ব্যবহারকারী দ্রুত এবং কার্যকরভাবে ডেটার বিশদ অংশ দেখতে পারে।
• ডেটা গ্রুপিং: বড় পরিমাণ ডেটাকে ছোট ছোট অংশে বিভক্ত করা হয়, যাতে ব্যবহারের জন্য এটি আরো সহজ এবং দ্রুত হয়।

উদাহরণ:

ধরা যাক, একটি অ্যাপ্লিকেশন যেখানে প্রোডাক্টের তালিকা (Master) দেখানো হচ্ছে এবং প্রতিটি প্রোডাক্টের বিস্তারিত তথ্য (Detail) প্রদর্শিত হচ্ছে।

এখানে দুটি প্যানেল থাকবে:

1. Master Panel: একটি ListView বা DataGrid যা সমস্ত প্রোডাক্ট প্রদর্শন করবে।
2. Detail Panel: একটি TextBlock বা অন্যান্য UI উপাদান যা নির্বাচিত প্রোডাক্টের বিস্তারিত তথ্য দেখাবে।

XAML Example for Master-Detail View:

<Window x:Class="MasterDetailExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Master-Detail View" Height="350" Width="525">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="3*" />
        </Grid.ColumnDefinitions>

        <!-- Master Panel -->
        <ListView Name="ProductList" Grid.Column="0" 
                  DisplayMemberPath="Name" 
                  SelectionChanged="ProductList_SelectionChanged">
        </ListView>

        <!-- Detail Panel -->
        <StackPanel Grid.Column="1">
            <TextBlock Name="ProductName" FontSize="16" />
            <TextBlock Name="ProductDescription" FontSize="14" />
            <TextBlock Name="ProductPrice" FontSize="14" />
        </StackPanel>
    </Grid>
</Window>

এখানে, ListView উপাদান ProductList হিসেবে Master Panel-এ প্রদর্শিত হবে। যখন ব্যবহারকারী একটি আইটেম নির্বাচন করবে, তখন তার বিস্তারিত তথ্য ProductName, ProductDescription, এবং ProductPrice এর মাধ্যমে Detail Panel-এ দেখানো হবে।

ViewModel Example:

public class ProductViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Product> _products;
    private Product _selectedProduct;

    public ObservableCollection<Product> Products
    {
        get { return _products; }
        set { _products = value; OnPropertyChanged(); }
    }

    public Product SelectedProduct
    {
        get { return _selectedProduct; }
        set
        {
            _selectedProduct = value;
            OnPropertyChanged();
            UpdateDetail();
        }
    }

    public ProductViewModel()
    {
        Products = new ObservableCollection<Product>
        {
            new Product { Name = "Laptop", Description = "A high-performance laptop", Price = 1200 },
            new Product { Name = "Smartphone", Description = "Latest model smartphone", Price = 800 },
            new Product { Name = "Headphones", Description = "Noise-canceling headphones", Price = 150 }
        };
    }

    private void UpdateDetail()
    {
        // Update details based on the selected product
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

User Control ব্যবহার

User Control হল একটি পুনঃব্যবহারযোগ্য UI কম্পোনেন্ট যা একটি বা একাধিক UI উপাদান ধারণ করে এবং একটি একক কন্ট্রোলের মতো ব্যবহার করা যায়। User Control ব্যবহার করলে একই UI উপাদানকে একাধিক জায়গায় পুনরায় ব্যবহার করা সহজ হয় এবং কোড কমে যায়।

User Control এর সুবিধা:

• কোড পুনঃব্যবহারযোগ্যতা: একাধিক জায়গায় একই UI উপাদান ব্যবহার করতে পারে, ফলে কোড কমিয়ে আনা সম্ভব।
• UI কাস্টমাইজেশন: UI উপাদানগুলির মধ্যে কাস্টম UI তৈরি করা সহজ হয়।
• পরিষ্কার এবং মডুলার কোড: বড় অ্যাপ্লিকেশনে UI এর আলাদা অংশগুলিকে পৃথকভাবে ম্যানেজ করা সহজ হয়।

User Control তৈরি:

ধরা যাক, একটি ProductDetailControl তৈরি করা হচ্ছে যা প্রোডাক্টের বিস্তারিত তথ্য প্রদর্শন করবে।

XAML (User Control for Product Detail):

<UserControl x:Class="MasterDetailExample.ProductDetailControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Width="400" Height="200">
    <StackPanel>
        <TextBlock Name="ProductName" FontSize="16" />
        <TextBlock Name="ProductDescription" FontSize="14" />
        <TextBlock Name="ProductPrice" FontSize="14" />
    </StackPanel>
</UserControl>

এখন, আপনি এই User Control কে MainWindow.xaml এ ব্যবহার করতে পারবেন।

MainWindow.xaml (Master-Detail View with User Control):

<Window x:Class="MasterDetailExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:MasterDetailExample"
        Title="Master-Detail View" Height="350" Width="525">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="3*" />
        </Grid.ColumnDefinitions>

        <!-- Master Panel -->
        <ListView Name="ProductList" Grid.Column="0" 
                  DisplayMemberPath="Name" 
                  SelectionChanged="ProductList_SelectionChanged">
        </ListView>

        <!-- User Control for Detail Panel -->
        <local:ProductDetailControl Grid.Column="1" />
    </Grid>
</Window>

এখানে, ProductDetailControl নামক User Control ব্যবহার করা হয়েছে যা Master Panel থেকে নির্বাচন করা প্রোডাক্টের বিস্তারিত দেখাবে। এটি MainWindow.xaml এর অংশ হিসেবে ব্যবহৃত হচ্ছে।

সারাংশ

Master-Detail View এবং User Control ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনের UI কে আরও মডুলার এবং পুনঃব্যবহারযোগ্য করে তুলতে পারেন। Master-Detail View প্যাটার্ন ব্যবহার করে ব্যবহারকারী সহজেই ডেটার সারাংশ এবং বিস্তারিত দেখতে পারে, এবং User Control ব্যবহার করে UI উপাদানগুলোকে পুনঃব্যবহারযোগ্য এবং পরিচালনাযোগ্য রাখা যায়।